/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-06-16 17:22:49
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-06-24 15:10:52
 * @FilePath: \adminstration\src\Common\Modal\SetField.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Button, Divider, Switch, Input, InputNumber, Select, Tooltip } from 'antd'
import { useEffect, useState } from 'react'
import { useEventEmitter, useSetState } from 'ahooks'
import { PlusOutlined } from '@ant-design/icons'
import { ProTable } from '@ant-design/pro-components'
import { FixedData, FieldTypeList, getValue, BuiltInListData, RedisListData, AxiosListData } from './config'

const { Option } = Select

const defaultData = {
    // 基础配置
    dataIndex: '', // * 数据库中字段名称
    title: '', // * 字段中文名称
    isEnabled: true, // * 启用状态
    valueType: 'input', // * 字段类型
    typeConfig: {}, // * 类型配置
    sort: 0, // * 字段排序
    width: 100, // * 字段宽度
    rules: true, // * 是否必填
    default: false, // * 启用默认值
    defaultValue: '', // * 默认值
    // 状态配置
    hideInAdded: false, // * 是否添加
    hideInModify: false, // * 是否修改
    hideInTable: false, // * 是否显示
    hideInSearch: false, // * 是否搜索
    // 便捷操作
    tooltip: false, // * 是否备注
    tooltipInput: '', // * 备注文案
    // * 是否折叠
    copyable: true, // * 是否拷贝
}

// 左侧列表
export const FieldList = ({ FieldSelectEvent, ModalHeight, FiledParameter }) => {
    const FixedField = [
        {
            title: '编号',
            dataIndex: 'uuid',
            valueType: 'hidden',
            sort: 1,
            width: 100,
            hideInTable: true,
        },
        {
            title: '名称',
            dataIndex: 'tableName',
            valueType: 'input',
            typeConfig: { length: 10 },
            sort: 1,
            width: 100,
        },
        {
            title: '状态',
            dataIndex: 'code',
            valueType: 'select',
            valueEnum: { 0: { text: '关闭', status: 'Error' }, 1: { text: '开启', status: 'Success' } },
            typeConfig: { obj: { 0: '关闭', 1: '启用' } },
            sort: 1,
            width: 100,
        },
    ]
    return (
        <ProTable
            className="LeftList"
            Option={false}
            pagination={false}
            search={false}
            request={() => Promise.resolve({ data: FixedData, success: true })}
            columns={FixedField}
            rowKey="uuid"
            toolbar={{
                actions: [
                    <Button key="list" type="primary" icon={<PlusOutlined />}>
                        新增字段
                    </Button>,
                ],
            }}
            onRow={record => {
                return { onClick: () => FieldSelectEvent.emit(record) }
            }}
            scroll={{ y: ModalHeight - 270 }}
        />
    )
}
// 右侧详情
export const SetField = ({ FieldSelectEvent, ModalHeight }) => {
    const [FieldData, setFieldData] = useState({})
    FieldSelectEvent.useSubscription(getValueList)
    async function getValueList(e) {
        const field = await getValue(e.key)
        if (field === '暂不支持该字段') {
            setFieldStateData(defaultData)
        } else {
            setFieldStateData(field)
        }
        setFieldData(e)
    }
    const typeConfigEvent = useEventEmitter()
    typeConfigEvent.useSubscription(({ type, data }) => {
        let abc = { [type]: data }
        setFieldStateData({ typeConfig: { ...FieldStateData.typeConfig, ...abc } })
    })
    const [FieldStateData, setFieldStateData] = useSetState(defaultData)

    const SubmitField = () => {
        console.log(FieldStateData)
    }

    return (
        <div className="RightList" style={{ height: ModalHeight - 193 }}>
            {FieldData && JSON.stringify(FieldData) !== '{}' && (
                <>
                    <Divider orientation="left">字段基础配置</Divider>
                    <div className="Input">
                        <div>字段映射</div>
                        <Input
                            placeholder="请输入备注信息"
                            value={FieldStateData.dataIndex}
                            onChange={e => setFieldStateData({ dataIndex: e.target.value })}
                        />
                    </div>
                    <div className="Input">
                        <div>字段名称</div>
                        <Input
                            placeholder="请输入备注信息"
                            value={FieldStateData.title}
                            onChange={e => setFieldStateData({ title: e.target.value })}
                        />
                    </div>
                    <div className="Switch">
                        <div>是否启用</div>
                        <Switch
                            checked={FieldStateData.isEnabled}
                            onChange={e => setFieldStateData({ isEnabled: e })}
                        />
                    </div>
                    <div>
                        <div>字段类型</div>
                        <Select
                            style={{ width: '100%' }}
                            placeholder="请选择字段类型"
                            value={FieldStateData.valueType}
                            onChange={e => {
                                setFieldStateData({ valueType: '', typeConfig: {} })
                                setTimeout(() => setFieldStateData({ valueType: e }), 1)
                            }}
                        >
                            {Object.keys(FieldTypeList).map(item => (
                                <Option key={item} value={item}>
                                    {FieldTypeList[item].text}
                                </Option>
                            ))}
                        </Select>
                    </div>
                    {FieldStateData.valueType && (
                        <div className="valueType">
                            <div> 类型配置 </div>
                            <div>
                                {FieldTypeList[FieldStateData.valueType].config.map(item => {
                                    switch (item) {
                                        case 'InputLength':
                                            return <InputLength typeConfigEvent={typeConfigEvent} key="InputLength" />
                                        case 'InputShowCount':
                                            return (
                                                <InputShowCount
                                                    typeConfigEvent={typeConfigEvent}
                                                    key="inputShowCount"
                                                />
                                            )
                                        case 'InputMaxRows':
                                            return <InputMaxRows typeConfigEvent={typeConfigEvent} key="InputMaxRows" />
                                        case 'InputMinRows':
                                            return <InputMinRows typeConfigEvent={typeConfigEvent} key="InputMinRows" />
                                        case 'InputMax':
                                            return <InputMax typeConfigEvent={typeConfigEvent} key="InputMax" />
                                        case 'InputMin':
                                            return <InputMin typeConfigEvent={typeConfigEvent} key="InputMin" />
                                        case 'InputStep':
                                            return <InputStep typeConfigEvent={typeConfigEvent} key="InputStep" />
                                        case 'DateTime':
                                            return <DateTime typeConfigEvent={typeConfigEvent} key="DateTime" />
                                        case 'DateRange':
                                            return <DateRange typeConfigEvent={typeConfigEvent} key="DateRange" />
                                        case 'DateType':
                                            return <DateType typeConfigEvent={typeConfigEvent} key="DateType" />
                                        case 'SelectOption':
                                            return <SelectOption typeConfigEvent={typeConfigEvent} key="SelectOption" />
                                        case 'SelectMode':
                                            return <SelectMode typeConfigEvent={typeConfigEvent} key="SelectMode" />
                                        case 'SelectLevel':
                                            return <SelectLevel typeConfigEvent={typeConfigEvent} key="SelectLevel" />
                                        default:
                                            return (
                                                <div style={{ color: 'red' }} key="key">
                                                    未设置组件
                                                </div>
                                            )
                                    }
                                })}
                            </div>
                        </div>
                    )}

                    <div className="Input">
                        <div>字段排序</div>
                        <InputNumber
                            placeholder="请输入备注信息"
                            style={{ width: '100%' }}
                            value={FieldStateData.sort}
                            onChange={e => setFieldStateData({ sort: e })}
                        />
                    </div>
                    <div className="Input">
                        <div>字段宽度</div>
                        <InputNumber
                            placeholder="请输入备注信息"
                            style={{ width: '100%' }}
                            value={FieldStateData.width}
                            onChange={e => setFieldStateData({ width: e })}
                        />
                    </div>
                    <div className="Switch">
                        <div>是否必填</div>
                        <Switch checked={FieldStateData.rules} onChange={e => setFieldStateData({ rules: e })} />
                    </div>
                    <div className="Switch">
                        <div>是否开启默认值</div>
                        <Switch checked={FieldStateData.default} onChange={e => setFieldStateData({ default: e })} />
                    </div>
                    {FieldStateData.default && (
                        <div className="Input">
                            <div>默认值</div>
                            <Input
                                placeholder="请输入备注信息"
                                value={FieldStateData.defaultValue}
                                onChange={e => setFieldStateData({ defaultValue: e.target.value })}
                            />
                        </div>
                    )}
                    <>
                        <Divider orientation="left">快捷操作配置</Divider>
                        <div className="Switch">
                            <div>是否备注</div>
                            <Switch
                                checked={FieldStateData.tooltip}
                                onChange={e => setFieldStateData({ tooltip: e })}
                            />
                        </div>
                        {FieldStateData.tooltip && (
                            <div className="Input">
                                <div>备注信息</div>
                                <Input
                                    value={FieldStateData.tooltipInput}
                                    placeholder="请输入备注信息"
                                    onChange={e => setFieldStateData({ tooltipInput: e.target.value })}
                                />
                            </div>
                        )}
                        <div className="Switch">
                            <div>是否折叠</div>
                            <Switch
                                checked={FieldStateData.ellipsis}
                                onChange={e => setFieldStateData({ ellipsis: e })}
                            />
                        </div>
                        <div className="Switch">
                            <div>是否拷贝</div>
                            <Switch
                                checked={FieldStateData.copyable}
                                onChange={e => setFieldStateData({ copyable: e })}
                            />
                        </div>
                    </>
                    <>
                        <Divider orientation="left">字段状态配置</Divider>
                        <div className="Switch">
                            <div>不能新增</div>
                            <Switch
                                checked={FieldStateData.hideInAdded}
                                onChange={e => setFieldStateData({ hideInAdded: e })}
                            />
                        </div>
                        <div className="Switch">
                            <div>不能修改</div>
                            <Switch
                                checked={FieldStateData.hideInModify}
                                onChange={e => setFieldStateData({ hideInModify: e })}
                            />
                        </div>
                        <div className="Switch">
                            <div>不能显示</div>
                            <Switch
                                checked={FieldStateData.hideInTable}
                                onChange={e => setFieldStateData({ hideInTable: e })}
                            />
                        </div>
                        <div className="Switch">
                            <div>不能搜索</div>
                            <Switch
                                checked={FieldStateData.hideInSearch}
                                onChange={e => setFieldStateData({ hideInSearch: e })}
                            />
                        </div>
                        <div className="Submit">
                            <Button type="primary" onClick={SubmitField}>
                                保存数据
                            </Button>
                        </div>
                    </>
                </>
            )}
        </div>
    )
}

// 字符长度
const InputLength = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>字符长度</div>
        <InputNumber
            style={{ width: '100%' }}
            placeholder="请设置字符串的长度"
            onChange={e => typeConfigEvent.emit({ type: 'InputLength', data: e })}
        />
    </div>
)

// input 显示数字
const InputShowCount = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>显示数字</div>
        <Switch
            onChange={e => {
                typeConfigEvent.emit({ type: 'InputShowCount', data: e })
            }}
        />
    </div>
)

// input 富文本最小高度
const InputMinRows = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>富文本最小高度</div>
        <InputNumber
            style={{ width: '100%' }}
            placeholder="请设置字符串的长度"
            onChange={e => typeConfigEvent.emit({ type: 'InputMinRows', data: e })}
        />
    </div>
)

// input 富文本最大高度
const InputMaxRows = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>富文本最大高度</div>
        <InputNumber
            style={{ width: '100%' }}
            placeholder="请设置字符串的长度"
            onChange={e => typeConfigEvent.emit({ type: 'InputMaxRows', data: e })}
        />
    </div>
)

// inputNumber 最大值
const InputMax = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>字符长度</div>
        <InputNumber
            style={{ width: '100%' }}
            placeholder="请设置数值的最大值"
            onChange={e => typeConfigEvent.emit({ type: 'InputMax', data: e })}
        />
    </div>
)

// inputNumber 最小值
const InputMin = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>字符长度</div>
        <InputNumber
            style={{ width: '100%' }}
            placeholder="请设置数值的最小值"
            onChange={e => typeConfigEvent.emit({ type: 'InputMin', data: e })}
        />
    </div>
)

// inputNumber 步长
const InputStep = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>字符长度</div>
        <InputNumber
            style={{ width: '100%' }}
            placeholder="请设置数值的步长"
            onChange={e => typeConfigEvent.emit({ type: 'InputStep', data: e })}
        />
    </div>
)

// DateTime 是否选择时间
const DateTime = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>是否选择时分秒</div>
        <Switch
            onChange={e => {
                typeConfigEvent.emit({ type: 'DateTime', data: e })
            }}
        />
    </div>
)

// DateRange 是否选择范围
const DateRange = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>是否选择范围</div>
        <Switch
            onChange={e => {
                typeConfigEvent.emit({ type: 'DateRange', data: e })
            }}
        />
    </div>
)

// DateType 时间类型
const DateType = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>时间类型</div>
        <Select
            defaultValue={'time'}
            onChange={e => {
                typeConfigEvent.emit({ type: 'DateType', data: e })
            }}
        >
            <Option value="time">日</Option>
            <Option value="week">周</Option>
            <Option value="month">月</Option>
            <Option value="quarter">季</Option>
            <Option value="year">年</Option>
        </Select>
    </div>
)

// ! SelectOption 下拉框内容设置
const SelectOption = ({ typeConfigEvent }) => {
    const [defaultValue, setDefaultValue] = useState('object')
    const [selectDetails, setSelectDetails] = useState('')
    useEffect(() => setSelectDetails(''), [defaultValue])
    useEffect(
        () => typeConfigEvent.emit({ type: 'DateType', data: { defaultValue, selectDetails } }),
        [defaultValue, selectDetails, typeConfigEvent],
    )
    return (
        <>
            <div className="Input">
                <div>下拉框数据</div>
                <Select defaultValue={defaultValue} onChange={e => setDefaultValue(e)}>
                    <Option value="object">内置对象</Option>
                    <Option value="rides">缓存数据</Option>
                    <Option value="axios">接口数据</Option>
                </Select>
            </div>
            {(() => {
                switch (defaultValue) {
                    case 'object':
                        return (
                            <div className="Input">
                                <div>内置对象</div>
                                <Select value={selectDetails} onChange={e => setSelectDetails(e)}>
                                    {Object.keys(BuiltInListData).map((item, index) => (
                                        <Option key={`ridesOption${index}`} value={item}>
                                            <Tooltip title={BuiltInListData[item].content}>
                                                <div style={{ width: 200 }}> {BuiltInListData[item].title}</div>
                                            </Tooltip>
                                        </Option>
                                    ))}
                                </Select>
                            </div>
                        )
                    case 'rides':
                        return (
                            <div className="Input">
                                <div>缓存对象</div>
                                <Select value={selectDetails} onChange={e => setSelectDetails(e)}>
                                    {Object.keys(RedisListData).map((item, index) => (
                                        <Option key={`ridesOption${index}`} value={item}>
                                            {RedisListData[item]}
                                        </Option>
                                    ))}
                                </Select>
                            </div>
                        )
                    case 'axios':
                        return (
                            <div className="Input">
                                <div>接口对象</div>
                                <Select value={selectDetails} onChange={e => setSelectDetails(e)}>
                                    {Object.keys(AxiosListData).map((item, index) => (
                                        <Option key={`ridesOption${index}`} value={item}>
                                            {AxiosListData[item]}
                                        </Option>
                                    ))}
                                </Select>
                            </div>
                        )
                    default:
                        break
                }
            })()}
        </>
    )
}

// SelectMode 下拉框是否多选
const SelectMode = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>是否多选</div>
        <Switch
            onChange={e => {
                typeConfigEvent.emit({ type: 'SelectMode', data: e })
            }}
        />
    </div>
)
// SelectLevel 树形选择器 仅最低级可选
const SelectLevel = ({ typeConfigEvent }) => (
    <div className="Input">
        <div>最底级可选</div>
        <Switch
            onChange={e => {
                typeConfigEvent.emit({ type: 'SelectLevel', data: e })
            }}
        />
    </div>
)
